<template>
    <div>
        <div class="myarchives-group">
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>姓名</span>
                </div>
                <input class="input" type="text" v-model="info.name" placeholder="请输入真实姓名"/>
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>姓别</span>
                </div>
                <div class="box-right">
                    <div class="checkbox mr20" :class="info.gender == 0 ? 'active' : ''" @click="info.gender=0">男</div>
                    <div class="checkbox" :class="info.gender == 1 ? 'active' : ''" @click="info.gender=1">女</div>
                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>年龄</span>
                </div>
                <input class="input" type="number" v-model="info.age" placeholder="请输入真实年龄" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>身份证</span>
                </div>
                <input class="input" type="text" v-model="info.idcard" placeholder="请输入真实身份证" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>手机号</span>
                </div>
                <input class="input" type="number" v-model="info.mobile" placeholder="请输入真实手机号" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>验证码</span>
                    <input class="input-left" type="number" placeholder="请输入" />
                </div>
                <div class="checkbox">获取验证码</div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>地址</span>
                </div>
                <div class="box-right arrow" @click="addressSelect(info.province, info.provinceName, info.city, info.cityName)">
                    <input type="text" class="input" placeholder="点击选择" v-model="addressName" disabled/>
                    <div><img :src="arrowUrl"></div>
                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>详情地址</span>
                </div>
                <input class="input" type="text" v-model="info.address" placeholder="请输入楼层和门牌号" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>联络人1</span>
                </div>
                <input class="input" type="text" v-model="info.mainContact" placeholder="报警时自动联络此人" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>联络人1号码</span>
                </div>
                <input class="input" type="number" v-model="info.mainMobile" placeholder="紧急联络人手机号" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>联络人2</span>
                </div>
                <input class="input" type="text" v-model="info.secondaryContact" placeholder="报警时自动联络此人" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>联络人2号码</span>
                </div>
                <input class="input" type="number" v-model="info.secondaryMobile" placeholder="紧急联络人手机号" />
            </div>
        </div>
        <div class="btn">
            <span @click="save">保存</span>
        </div>
    </div>
</template>
<script>
const bixuanUrl = require('@/assets/img/mine/bixuan.png')
const arrowUrl = require('@/assets/img/mine/arrow.png')
import { jsonFilter, regExp } from '@/assets/js/util.js'
import { Toast } from 'mint-ui'
export default {
    data () {
        return {
            info: {
                id: '',
                name: '',               //必填
                gender: 0,              //必填
                age: '',                //必填
                idcard: '',             //必填
                mobile: '',             //必填
                province: '',         //必填
                provinceName: '',
                city: '',             //必填
                cityName: '',
                address: '',
                mainContact: '',
                mainMobile: '',
                secondaryContact: '',
                secondaryMobile: ''
            },
            bixuanUrl: bixuanUrl,
            arrowUrl: arrowUrl,
            provinceLists :[],
            addressName: ''
        }
    },
    created () {
        let sessionprovinceLists = sessionStorage.getItem("provinceLists")
        if (sessionprovinceLists) {
            this.provinceLists = JSON.parse(sessionprovinceLists)
        }else {
            this.ACApi.getareaFirstlevel({
                onSuccess: res => {
                    if (res.data.success) {
                        this.provinceLists = res.data.result
                        sessionStorage.setItem("provinceLists", JSON.stringify(res.data.result))
                    }
                },
                onFail: error => console.log(error)
            })
        }
    },
    mounted () {
        let id = this.LocalStorageUtil.getItem('patientId')
        if (id) {
            this.ACApi.getpatientsUsers({
                id: id
            },{
                onSuccess: res => {
                    if (res.data.success) {
                        for (let _key in this.info) {
                            for (let key in res.data.result) {
                                if (_key == key) {
                                    this.info[_key] = res.data.result[key]
                                }
                            }
                        }
                        this.addressName = this.info.provinceName + ' ' +this.info.cityName
                        this.ACApi.getareaAreas({
                            pid: this.info.province
                        },{
                            onSuccess: res => {
                                sessionStorage.setItem("cityLists", JSON.stringify(res.data.result))
                            },
                            onFail: error => console.log(error)
                        })
                    }
                },
                onFail: error => console.log(error)
            })
        }else {
            this.ACApi.getareaAreas({
                pid: 1046
            },{
                onSuccess: res => {
                    sessionStorage.setItem("cityLists", JSON.stringify(res.data.result))
                },
                onFail: error => console.log(error)
            })
        }
    },
    methods: {
        save () {
            // let json = jsonFilter(this.info)
            let json = this.info
            if (!json.name) {
                Toast({
                    message: '请填写姓名',
                    duration: 1500
                })
                return
            }
            if (!json.age) {
                Toast({
                    message: '请填写年龄',
                    duration: 1500
                })
                return
            }
            if (json.age < 0) {
                Toast({
                    message: '请填写真确的年龄',
                    duration: 1500
                })
                return
            }
            if (!json.idcard) {
                Toast({
                    message: '请填写身份证号',
                    duration: 1500
                })
                return
            }
            if (regExp.idCard(json.idcard)) {
                Toast({
                    message: '请填写正确的身份证号',
                    duration: 1500
                })
                return
            }
            if (!json.mobile) {
                Toast({
                    message: '请填写手机号',
                    duration: 1500
                })
                return
            }
            if (regExp.mobile(json.mobile)) {
                Toast({
                    message: '请填写正确的手机号',
                    duration: 1500
                })
                return
            }
            if (!json.province || !json.city) {
                Toast({
                    message: '请选择省市地址',
                    duration: 1500
                })
                return
            }
            if (json.mainMobile && regExp.mobile(json.mainMobile)) {
                Toast({
                    message: '请填写正确的联络人1的手机号',
                    duration: 1500
                })
                return
            }
            if (json.secondaryMobile && regExp.mobile(json.secondaryMobile)) {
                Toast({
                    message: '请填写正确的联络人2的手机号',
                    duration: 1500
                })
                return
            }
            if (json.id) {
                this.ACApi.updataPatientsUsers(json,{
                    onSuccess: res => {
                        if (res.success) {
                            Toast({
                                message: '更新成功',
                                iconClass: 'mintui mintui-success',
                                duration: 1000
                            })
                            this.$router.go(-1)
                        }
                    },
                    onFail: error => console.log(error)
                })
            }else {
                json.id = this.LocalStorageUtil.getItem('patientId')
                this.ACApi.patientsUsers(json,{
                    onSuccess: res => {
                        if (res.success) {
                            Toast({
                                message: '提交成功',
                                iconClass: 'mintui mintui-success',
                                duration: 1000
                            })
                            this.LocalStorageUtil.setItem('patientId', res.result)
                            this.$router.go(-1)
                        }
                    },
                    onFail: error => console.log(error)    
                })
            }
            
        },
        addressSelect (initProvince, initProvinceName, initCity, initCityName) {
            this.$addresspicker.create({
                params:{
                    isShow: true,
                    initProvince: initProvince,
                    initProvinceName: initProvinceName,
                    initCity: initCity,
                    initCityName: initCityName,
                    provinceLists: this.provinceLists
                }
            },(res)=>{
                this.info.province = res.province.id
                this.info.city = res.city.id
                this.info.provinceName = res.province.shortName
                this.info.cityName = res.city.shortName
                this.addressName = this.info.provinceName + ' ' +this.info.cityName
            })
        },
    }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/css/layout'
@import '../../../assets/css/var'
.myarchives-group {
    $column()
    .box {
        box-sizing: border-box
        $row()
        $flex-sb()
        $flex-ac()
        width: 100%
        height: 1rem
        border-bottom: 1px solid $dWhite
        color: $lBlack
        font-size: $text-font28
        padding 0 .4rem
        .box-left {
            $row()
            div {
                width: .4rem
                img {
                    width: .17rem
                    height: .16rem
                }
            }
        }
        .input {
            $flex-1()
            color: $lSilver
            padding .05rem
            text-align:right
        }
        .input-left {
            width: 2rem
            font-size: $text-font28
            color: $lSilver
            margin-left: 1.3rem
        }
        .box-right {
            $row()
        }
        .checkbox {
            width: 2rem
            height: .6rem
            background: $dWhite
            color: $lBlack
            border-radius: 5px
            text-align: center
            line-height: .55rem
            &.mr20 {
                margin-right: .2rem    
            }
            &.active {
               background: $green
               color: $White
            }
        }
    }
}
.arrow {
    position relative
    right: -.2rem
    span {
        padding-top: .25rem
        color: $elBlack
    }
    img {
        width .76rem
        height .76rem
    }    
}
.btn {
    $row()
    $flex-vc()
    width: 100%
    padding .4rem 0
    span {
        display: inline-block
        width: 4.5rem
        height: .6rem
        background: $green
        color: $White
        border-radius: 5px
        text-align: center
        line-height: .55rem
        &:hover {
            background: $green-7
        }
    }
}
</style>
